<div class="ui cards" [class.centered]="centered">
  <div class="card" *ngIf="(workflows && workflows.length) || (projects && projects.length)">
    <div class="content">
      <div class="header">
        {{'favorite_add' | translate}}
      </div>
      <div class="description">
        <sui-select class="selection"
                    placeholder="{{'favorite_select_type' | translate}}"
                    [(ngModel)]="newFav.type">
            <sui-select-option value="project"></sui-select-option>
            <sui-select-option value="workflow"></sui-select-option>
        </sui-select>
        <ng-container *ngIf="newFav.type === 'project'">
          <sui-select class="selection mt5"
                      placeholder="{{'favorite_project_select' | translate}}"
                      labelField="name"
                      [options]="filteredProjects"
                      [isSearchable]="true"
                      [(ngModel)]="newFav"
                      #selectProj>
              <sui-select-option *ngFor="let option of selectProj.filteredOptions" [value]="option"></sui-select-option>
          </sui-select>
        </ng-container>
        <ng-container *ngIf="newFav.type === 'workflow'">
          <sui-select class="selection mt5"
                      placeholder="{{'favorite_project_select' | translate}}"
                      labelField="name"
                      valueField="key"
                      [options]="projects"
                      [isSearchable]="true"
                      [(ngModel)]="projectKeySelected"
                      #selectProj>
              <sui-select-option *ngFor="let option of selectProj.filteredOptions" [value]="option"></sui-select-option>
          </sui-select>
        </ng-container>
        <ng-container *ngIf="newFav.type === 'workflow' && projectKeySelected">
          <sui-select class="selection mt5"
                      placeholder="{{'favorite_workflow_select' | translate}}"
                      labelField="workflow_name"
                      [options]="filteredWf"
                      [isSearchable]="true"
                      [(ngModel)]="newFav"
                      #selectWf>
              <sui-select-option *ngFor="let option of selectWf.filteredOptions" [value]="option"></sui-select-option>
          </sui-select>
        </ng-container>
      </div>
    </div>
    <div class="ui bottom green attached button" [class.disabled]="loading[newFav.key + newFav.workflow_name]" (click)="updateFav(newFav)">
      <i class="plus icon" *ngIf="!loading[newFav.key + newFav.workflow_name]"></i>
      <div class="ui active small inline loader" *ngIf="loading[newFav.key + newFav.workflow_name]"></div>
      {{'favorite_add_btn' | translate}}
    </div>
  </div>
  <ng-container *ngFor="let favorite of favorites">
    <div class="card">
      <div class="content">
        <ng-container [ngSwitch]="favorite.type">
          <ng-container *ngSwitchCase="'workflow'">
            <div class="right floated" *ngIf="!favorite.icon">
              <i class="share alternate icon"></i>
            </div>
            <img class="right floated mini ui image" [src]="favorite.icon" *ngIf="favorite.icon">
            <a class="header" sm-item href="#" [routerLink]="['/project', favorite.key, 'workflow', favorite.workflow_name]">
              {{favorite.workflow_name}}
            </a>
            <div class="meta">
              {{'navbar_workflow_in' | translate}} <a class="projectLink" href="" [routerLink]="['/project', favorite.key]">{{favorite.key}}</a>
            </div>
            <div class="description">
              {{favorite.description}}
            </div>
          </ng-container>
          <ng-container *ngSwitchDefault>
            <div class="right floated" *ngIf="!favorite.icon">
              <i class="browser icon"></i>
            </div>
            <img class="right floated mini ui image" [src]="favorite.icon" *ngIf="favorite.icon">
            <a class="header" sm-item href="#" [routerLink]="['/project', favorite.key]">
              {{favorite.name}}
            </a>
            <div class="meta">
              {{'common_project' | translate}}
            </div>
            <div class="description">
              {{favorite.description}}
            </div>
          </ng-container>
        </ng-container>
      </div>
      <div class="ui bottom attached vertical animated button" (click)="updateFav(favorite)" [class.disabled]="loading[favorite.key + favorite.workflow_name]" tabindex="0">
        <div class="hidden content">{{'common_favorites_delete' | translate}}</div>
        <div class="visible content">
          <div class="ui active small inline loader" *ngIf="loading[favorite.key + favorite.workflow_name]"></div>
          <i class="trash icon" *ngIf="!loading[favorite.key + favorite.workflow_name]"></i>
        </div>
      </div>
    </div>
  </ng-container>
</div>
